<!-- 管理后台布局组件 -->
<template>
  <div class="admin-container">
    <div class="side-menu">
      <h2>管理后台</h2>
      <ul>
        <li 
          v-for="item in menuList" 
          :key="item.path"
          @click="toggleSubMenu(item)"
        >
          <div 
            class="menu-item" 
            :class="{ active: item.expanded }"
          >
            {{ item.title }}
            <i class="arrow-icon"></i>
          </div>
          <transition name="slide">
            <ul 
              v-show="item.expanded" 
              class="sub-menu"
            >
              <li 
                v-for="subItem in item.children" 
                :key="subItem.path"
                @click="navigate(subItem)"
                :class="{ active: subItem.isActive }"
              >
                {{ subItem.title }}
              </li>
            </ul>
          </transition>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { reactive, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 菜单数据，使用 /adminLayout/xxx 格式路径以匹配路由配置
const menuList = reactive([
  {
    title: '系统管理',
    path: '/adminLayout/system',
    expanded: false,
    children: [
      { title: '用户管理', path: '/adminLayout/system/users', isActive: false },
    ]
  },
  {
    title: '商品管理',
    path: '/adminLayout/goods',
    expanded: false,
    children: [
      { title: '退换货管理', path: '/adminLayout/goods/returns', isActive: false },
      { title: '商品分类', path: '/adminLayout/goods/categories', isActive: false },
      { title: '发布商品', path: '/adminLayout/goods/create', isActive: false },
      { title: '出售中商品', path: '/adminLayout/goods/selling', isActive: false },
      { title: '仓库中商品', path: '/adminLayout/goods/warehouse', isActive: false }
    ]
  },
  {
    title: '订单管理',
    path: '/adminLayout/orders',
    expanded: false,
    children: [
      { title: '全部订单', path: '/adminLayout/orders/AllOrders', isActive: false },
      { title: '已取消未付款', path: '/adminLayout/orders/canceled-unpaid', isActive: false },
      { title: '已取消已付款', path: '/adminLayout/orders/canceled-paid', isActive: false },
      { title: '已完成订单', path: '/adminLayout/orders/completed', isActive: false },
      { title: '未处理订单', path: '/adminLayout/orders/unprocessed', isActive: false }
    ]
  },
  {
    title: '会员管理',
    path: '/adminLayout/members',
    expanded: false,
    children: [
      { title: '账户信息', path: '/adminLayout/members/accounts', isActive: false },
      { title: '消费明细', path: '/adminLayout/members/consumption', isActive: false },
      { title: '积分明细', path: '/adminLayout/members/points', isActive: false },
      { title: '优惠券管理', path: '/adminLayout/members/coupons', isActive: false }
    ]
  },
  {
    title: '公告管理',
    path: '/adminLayout/announcements',
    expanded: false,
    children: [
      { title: '公告发布管理', path: '/adminLayout/announcements/manage', isActive: false }
    ]
  },
  {
    title: '评论管理',
    path: '/adminLayout/comments',
    expanded: false,
    children: [
      { title: '用户评论管理', path: '/adminLayout/comments/user', isActive: false }
    ]
  },
  {
    title: '其他管理',
    path: '/adminLayout/others',
    expanded: false,
    children: [
      { title: '客服管理', path: '/adminLayout/others/customer-service', isActive: false },
      { title: '反馈管理', path: '/adminLayout/others/feedback', isActive: false }
    ]
  }
])

// 自动展开当前菜单
watch(
  () => route.path,
  (newPath) => {
    for (let i = 0; i < menuList.length; i++) {
      const mainMenu = menuList[i]
      if (mainMenu.children.some(child => child.path === newPath)) {
        mainMenu.expanded = true
        break
      }
    }
  }
)

// 展开/折叠菜单
const toggleSubMenu = (item) => {
  item.expanded = !item.expanded
}

// 导航并设置激活项
const navigate = (subItem) => {
  // 清除所有子项的激活状态
  menuList.forEach(item => {
    item.children.forEach(child => {
      child.isActive = false
    })
  })

  // 设置当前点击项为激活状态
  subItem.isActive = true

  // 路由跳转
  router.push(subItem.path)
}
</script>

<style scoped>
.side-menu {
  width: 260px;
  padding: 24px;
  background: #2a2d3e;
  color: #fff;
  transition: all 0.3s ease;
  overflow-x: hidden;
}

.logo {
  display: block;
  margin: 0 auto 20px;
  width: 120px;
  height: 40px;
  object-fit: cover;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 6px;
  font-size: 14px;
  position: relative;
}

.menu-item .el-icon {
  margin-right: 8px;
  font-size: 16px;
}

.menu-item:hover,
.menu-item.active {
  background: #1e2132;
  color: #007bff;
}

.menu-item.active .el-icon {
  color: #007bff;
}

.sub-menu {
  padding-left: 16px;
}

.sub-menu li {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  font-size: 13px;
}

.sub-menu li .el-icon {
  margin-right: 8px;
  font-size: 14px;
}

.sub-menu li:hover,
.sub-menu li.active {
  background: #007bff;
  color: #fff;
}

.sub-menu li.active .el-icon {
  color: #fff;
}

.arrow-icon {
  margin-left: auto;
  transition: transform 0.3s;
}

.menu-item.expanded .arrow-icon {
  transform: rotate(90deg);
}
</style>